<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        ul {
            overflow: hidden;
            list-style: none;
            margin: 20px;
        }
        
        li {
            float: left;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <img src="images/star.png" alt="">
            <img src="images/star.png" alt="">
            <img src="images/star.png" alt="">
            <img src="images/star.png" alt="">
            <img src="images/star.png" alt="">
        </li>
    </ul>
    <script src="js/jquery.min.js"></script>
    <script>
        // 图片存放地址
        var path = 'images/star.png';
        var path1 = 'images/star1.png';
        // 鼠标移上时,该图片的之前的所有元素将重新渲染新的src属性值
        $('li').on('mouseenter', 'img', function() {
            $(this).attr('src', path1)
                .prevAll().attr('src', path1).end()
                .nextAll().attr('src', path)
        });
        // 鼠标点击时,给img图片添加新的类名
        $('li').on('click', 'img', function() {
            // 给上一次点击位置的地方,清除类名
            $('img.active').removeClass('active');
            //再给本次点击位置的地方,添加新的类名
            $(this).addClass('active');
        });
        //鼠标离开时,恢复原有src属性
        $('li').on('mouseleave', function() {
            // 判断是否有类名
            if ($(this).find('.active')[0]) {
                // 有类名,则给该类名(包括自己)之前的所有元素,修改为path1地址,
                $(this).find('.active').attr('src', path1)
                    .prevAll().attr('src', path1).end() //end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。
                    // 该类名之后的所有元素,图片位置修改为path地址
                    .nextAll().attr('src', path)
            } else {
                $(this).children().attr('src', path)
            }
        });
    </script>
</body>

</html>